<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志</el-breadcrumb-item>
      <el-breadcrumb-item>登录日志</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :data="pageInfo.list">
        <el-table-column prop="id" label="日志ID"></el-table-column>
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="roleId" label="角色ID"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="opType" label="操作类型">
          <template slot-scope="scope">
            {{scope.row.opType==6?'注销':'登录'}}
          </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="操作时间">
          <template slot-scope="scope">
            {{scope.row.loginTime}}
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="用户IP地址"></el-table-column>
        <el-table-column prop="userAgent" label="浏览器类型"></el-table-column>
      </el-table>
      <!--列表分页-->
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageNumberChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="pageSizes"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>


  export default {
    name: "LoginLog",
    data() {
      return {

        // 分页请求时要携带的参数
        pageReqParams: {
          query: '',
          pageNum: 1,
          pageSize: 10
        },
        // 分页信息
        pageInfo: {
          pageNum: 0,
          pageSize: 0,
          total: 0,
          totalPage: 0,
          list: []
        },
        // 分页的大小常量列表
        pageSizes: [10,20, 30, 50]
      }
    },

    created() {
      this.getLoginLogPageFunction();
    },
    methods:{


      handlePageSizeChange(size) {
        this.pageInfo.pageSize = size;
        this.pageReqParams.pageSize = size;
        this.getLoginLogPageFunction();
      },

      handleCurrentPageNumberChange(pageNum) {
        this.pageReqParams.pageNum = pageNum;
        this.getLoginLogPageFunction();
      },

      getLoginLogPageFunction(){
        this.api.__api__LoginLogsPage(this.pageReqParams)
          .then(data=>{
            this.pageInfo = data.data;
          }).catch(error=>{
          console.log(error)
        })
      }
    }
  }

</script>

<style scoped>

</style>
